iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
自我挑戰組

小白網頁設計練成記系列 第 18

小白網頁設計練成記-DAY18-CSS選取器-屬性/值

  • 分享至 

  • xImage
  •  

我們先來看一張圖,了解一下css的基本寫法:

https://ithelp.ithome.com.tw/upload/images/20220917/201520345JisTb1zhl.png

在大括號左邊的selector是指在頁面上,找到符合選取器的元素,這邊是h1標籤,找到後就套用大括號裡所寫的css。
color指的是css的屬性,冒號帶表屬性設定結束,blue則是屬性的值,分號就是代表設定結束。

直接選取標籤

下面是直接選取< p >然後設定字體顏色為紅色:

<title>Document</title>
    <style>
        p{              /*選取p標籤*/
            color:red;  /*設定字體顏色*/
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>
</body>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220917/20152034ecWbxl3Q1g.jpg

選取中括號[ ]

下面有兩個網頁連結,其中一個屬性設定為 target,此時我們如果要選取有 target 屬性的< a >,就要使用中括號[ ],示範如下:

<title>Document</title>
    <style>
        p{
            color:red;
        }
        
        a[target]{            /*找到a之後再找到target,然後對其設定*/
            background-color: #fac;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>

    <a href="http://google.com" target="_blank">google連結1</a>/*我在這裡*/
    <a href="http://google.com">google連結2</a>
</body>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220917/201520342TnBc7vEVB.jpg

[ ^= ]從頭找

在中括號加入 屬性^=屬性值,他就會從該從行的前面篩選條件,看以下示範:

<style>
        p{
            color:red;
        }
        
        a[target]{
            background-color: #fac;
        }
        a[href^="https"]{    /*從頭開始找htpps,設定該連結字體大小30px*/
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>

    <a href="http://google.com" target="_blank">google連結1</a>
    <a href="https://google.com">google連結2</a> /*找到啦,設定字體大小30px*/
</body>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220917/20152034EkZL7jD9eU.jpg

由上述可已知道,在兩個連結前面篩選符合https的值,對其設定字體大小30px。

[ $= ]從尾找

跟從頭找相反,這個就是從尾巴篩選條件,看以下示範:

<style>
        p{
            color:red;
        }
        
        a[target]{
            background-color: #fac;
        }
        a[href^="https"]{
            font-size: 30px;
        }
        p[name$="456"]{           /*從name的後面找456,然後設定背景和字體顏色*/
            background-color: #00f;
            color: #fff;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>

    <a href="http://google.com" target="_blank">google連結1</a>
    <a href="https://google.com">google連結2</a>

    <p name="123_456">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ratione.</p>     /*456在這裡 嘿嘿嘿*/
    <p name="123">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, quas.</p>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220917/20152034ZOrW2K1VDf.jpg

直接選取屬性

有人說能不能直接指定要選取的屬性,當然可以囉,就像絕對路徑一樣,看以下示範:

 <style>
        div[name="div2"]{    /*找到div再找到div2*/
            color: green;
        }
    </style>
</head>
<body>

    <div name="div1">hello world1</div>
    <div name="div2">hello world2</div>  /*直接找到家樓下哈哈哈*/
</body>

顯示如下:
![](https://ithelp.ithome.com.tw/upload/images/20220917/20152034vpBhtN4NXr.jpg


上一篇
小白網頁設計練成記-DAY17-CSS的優先權
下一篇
小白網頁設計練成記-DAY19-選取器-符號
系列文
小白網頁設計練成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言